<template>
  <a-modal
    v-model:visible="isShowForm"
    width="1000px"
    destroyOnClose
    :wrap-class-name="isNeedFullClass"
    :maskClosable="false"
  >
    <template #title>
      <span>{{ title }}</span>
    </template>
    <template #closeIcon>
      <modal-close
        :canFullscreen="true"
        :fullScreen="fullScreen"
        @cancel="close"
        @fullscreen="handleFullScreen"
      />
    </template>
    <a-spin :spinning="loading">
      <a-pagination
        class="g-modal-pagination"
        v-if="pageDataList.length > 1"
        size="small"
        v-model:current="current"
        :page-size="1"
        :total="pageDataList.length"
        @change="(page, pageSize) => handlePageChange(page, pageSize)"
      ></a-pagination>
      <slot></slot>
    </a-spin>
    <template #footer>
      <a-space>
        <slot name="leftBtn"></slot>
        <div v-if="isShowFooter">
          <a-button key="back" @click="close">取消</a-button>
          <a-button key="submit" type="primary" @click="handleSaveAndClose">保存</a-button>
          <a-button key="submit" type="primary" @click="handleSave">保存不退出</a-button>
        </div>
        <slot name="rightBtn"></slot>
      </a-space>
    </template>
  </a-modal>
</template>

<script lang="ts">
  import { defineComponent, toRefs } from 'vue';
  import ModalClose from './modal-close.vue';
  import { useModalDragMove } from './useModalDrag';
  export default defineComponent({
    components: {
      ModalClose,
    },
    props: {
      title: {
        type: String,
        default: '新增',
      },
      pageDataList: {
        type: Array,
        default: [],
      },
      /**是否展示Footer按钮 */
      isShowFooter: {
        type: Boolean,
        default: true,
      },
      loading: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['save', 'close', 'getPageData'],
    data() {
      return {
        isShowForm: false,
        fullScreen: false,
        current: 1,
      };
    },
    computed: {
      isNeedFullClass() {
        return this.fullScreen ? 'fullscreen-modal' : '';
      },
    },
    watch: {
      isShowForm(show) {
        //打开的时候显示第一页 请求数据
        if (show) {
          this.handlePageChange(1);
        } else {
          this.reset();
        }
      },
    },
    mounted() {
      const { isShowForm } = toRefs(this);
      useModalDragMove({
        visible: isShowForm,
      });
    },
    methods: {
      handlePageChange(page: number) {
        this.current = page;
        this.$emit('getPageData', this.pageDataList[page - 1]);
      },
      handleFullScreen() {
        this.fullScreen = !this.fullScreen;
      },
      open() {
        this.isShowForm = true;
      },
      close() {
        this.$emit('close', !!this.pageDataList ? this.pageDataList[this.current - 1] : null);
        this.isShowForm = false;
      },
      reset() {
        this.fullScreen = false;
        this.current = 1;
      },
      handleSave() {
        this.$emit('save', !!this.pageDataList ? this.pageDataList[this.current - 1] : null);
      },
      handleSaveAndClose() {
        this.$emit(
          'save',
          () => {
            this.close();
          },
          !!this.pageDataList ? this.pageDataList[this.current - 1] : null,
        );
      },
      success(result: any = true) {
        if (result) {
          this.close(result);
        } else {
          this.close();
        }
      },
    },
  });
</script>

<style scoped lang="less">
  .fullscreen-modal {
    overflow: hidden;
    .ant-modal {
      top: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100%;

      &-content {
        height: 100%;
      }
    }
  }
  .g-modal-pagination {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
  }
</style>
